<template>
  <div class="rtspfull">
    <div class="tab-box">
      <div
        class="tab-item"
        @click="selectTab('1')"
        :class="{ active: currentTab == '1' }"
      >
        定点
      </div>
      <div
        class="tab-item"
        @click="selectTab('2')"
        :class="{ active: currentTab == '2' }"
      >
        动点
      </div>
    </div>
    <img class="close" @click="minx" src="/images/new/lwms/closelw.png" />
    <div class="video-content">
      <videoRtsp
        :showToolbar="0"
        :width="3780"
        :height="1440"
        :vid="currentCode"
      >
      </videoRtsp>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  vid: String,
  gdid: String,
});
const emit = defineEmits(["close"]);
const minx = () => {
  emit("close");
};
let currentCode = ref("");
let currentTab = ref("1");
const selectTab = (tab) => {
  currentTab.value = tab;
    if (tab == "1") {
      currentCode.value = props.vid;
    } else {
      currentCode.value = props.gdid;
    }
//   if (tab == "1") {
//     currentCode.value = "f688df26ff2a43a4a249505e444ac1b3";
//   } else {
//     currentCode.value = "7f0afc8b9b144f879b7a382bed4e81ee";
//   }
};

watch(
  () => props.vid,
  (newval) => {
    if (newval) {
      currentCode.value = newval;
    }
  },
  {
    deep: true,
    immediate: true,
  }
);

onMounted(() => {});
</script>

<style lang="scss" scoped>
.rtspfull {
  width: 100%;
  height: 100%;
  z-index: 999;
  background: url("/images/new/lwms/outbg.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  left: 0;
  top: 0;
  padding: 150px 50px 30px 30px;
  .tab-box {
    cursor: pointer;
    width: 410px;
    height: 70px;
    background: url("/images/new/lwms/tagbg.png") no-repeat;
    background-size: 100% 100%;
    display: flex;
    align-items: center;
    padding: 4px;
    position: absolute;
    left: 34px;
    top: 38px;
    .tab-item {
      width: 50%;
      font-family: YouSheBiaoTiHei;
      font-size: 23px;
      color: #ffffff;
      line-height: 64px;
      letter-spacing: 1.5px;
      text-align: center;
      &.active {
        background: url("/images/new/lwms/active.png");
        background-size: 100% 100%;
      }
    }
  }
  .close {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 25px;
    right: 59px;
    cursor: pointer;
  }
  .video-content {
    width: 100%;
    height: 100%;
  }
}
</style>